<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="王建春">
    <title>改变图片的路径</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            width: 216px;
            background-color: gray;
            border: 4px solid gray;
            overflow: hidden;
        }
        li{
            width: 50px;
            height: 50px;
            margin: 2px;
            float: left;
        }
        li.first{
            width: 158px;
            height: 158px;
        }
        img{
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first"><img src="img/big_1.jpg" alt=""></li>
        <li><a href="javascript:;"><img src="img/small_1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_4.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_5.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_6.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_7.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_8.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_9.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_10.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="img/small_11.jpg" alt=""></a></li>
    </ul>
</body>
<html>
<script>
    var imgs =document.querySelectorAll('img');
    
    // 从第二张开始给每一张添加鼠标进来的事件
    for(var i=1;i<imgs.length;i++){
        imgs[i].index=i
        imgs[i].onmouseover=function(){
            // 方式一
            // imgs[0].src='img/big_'+this.index +'.jpg'

            // 方式二
            // replace()替换字符串
            // 参数1：替换掉的内容 2.替换后的内容
            imgs[0].src=this.src.replace('small','big')
        }

    }

</script>